<template>
    <!-- 首页 实时预警模块下面的 人物信息列表组件 -->
    <li class="base-info-list cursor-point">
        <img :src="infolistObj.imgUrl" alt="" />
        <div class="info-people">
            <p>
                <span class="list-name">{{ infolistObj.name }}</span>
                <span class="list-plcae">{{ infolistObj.place }}</span>
            </p>
            <h4>{{ infolistObj.time }}</h4>
        </div>
        <div v-show="infolistObj.status" class="info-status">
            <span v-if="infolistObj.status == '1'" class="have-feedback"
                >已反馈</span
            >
            <span v-else class="no-feedback">未反馈</span>
        </div>
    </li>
</template>

<script>
export default {
    name: 'BaseInfoList',
    props: {
        infolistObj: {
            type: Object,
            default: () => {
                return {
                    imgUrl: '@/assets/image/user-face.png',
                    name: '',
                    place: '',
                    time: '',
                    status: '' // 状态 0 未反馈       1 已反馈
                };
            }
        }
    }
};
</script>

<style lang="less" scoped>
.base-info-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 36.17rem;
    height: 4.17rem;
    background: #f8f8f8;
    margin-bottom: 0.67rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
    &:last-child {
        margin-bottom: 0;
    }
    img {
        width: 4.17rem;
        height: 4.17rem;
    }
    .info-people {
        p {
            width: 22.17rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .list-name {
            color: #2364d9;
            padding-right: 1rem;
            border-right: 1px solid #2364d9;
            margin-right: 1rem;
        }
        h4 {
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 1.42rem;
            margin-top: 0.17rem;
        }
    }
    span {
        font-size: 1rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 1.42rem;
    }
    .no-feedback,
    .have-feedback {
        height: 1.83rem;
        padding: 0.17rem 1rem;
        background: rgba(255, 162, 0, 0.2);
        border-radius: 1.04rem;
        border: 0.08rem solid #ffa200;
        color: #ffa200;
    }
    .have-feedback {
        color: #67c23a;
        border-color: #67c23a;
        background: rgba(103, 194, 58, 0.2);
    }
}
</style>
